<template>
  <el-form :model="formData" label-width="150px" label-position="right">
    <el-form-item label="脑脊液检测">
      <el-radio-group v-model="formData.labTests.csf">
        <el-radio :label="1">否</el-radio>
        <el-radio :label="2">是</el-radio>
      </el-radio-group>
    </el-form-item>
    
    <template v-if="formData.labTests.csf === 2">
      <el-divider content-position="left">脑脊液检测项</el-divider>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="检查日期">
            <el-date-picker v-model="formData.csfTest.checkup_time" type="datetime"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="颜色">
            <el-select v-model="formData.csfTest.color">
              <el-option v-for="item in colorOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="透明度">
            <el-select v-model="formData.csfTest.clarity">
              <el-option v-for="item in clarityOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="压力">
            <el-select v-model="formData.csfTest.stress">
              <el-option :label="'正常'" :value="1"></el-option>
              <el-option :label="'异常'" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="formData.csfTest.stress === 2">
          <el-form-item label="异常描述">
            <el-input v-model="formData.csfTest.stress_remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-divider content-position="left">细胞计数</el-divider>
      
      <el-row :gutter="20">
        <el-col :span="8" v-for="item in cellCountItems" :key="item.key">
          <el-form-item :label="item.label">
            <el-input v-model="formData.csfTest[item.key]">
              <template #append>
                <el-select v-model="formData.csfTest[`${item.key}_result`]" style="width: 150px">
                  <el-option v-for="option in resultOptions" :key="option.value" :label="option.label" :value="option.value"></el-option>
                </el-select>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item v-if="formData.csfTest[`${item.key}_result`] === '3'">
            <el-input v-model="formData.csfTest[`${item.key}_remark`]" placeholder="异常描述"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-divider content-position="left">其他检测项目</el-divider>
      
      <el-row :gutter="20">
        <el-col :span="8" v-for="item in otherTestItems" :key="item.key">
          <el-form-item :label="item.label">
            <el-switch
              v-model="formData.csfTest[item.key]"
              :active-value="2"
              :inactive-value="1"
              inline-prompt
              active-text="是"
              inactive-text="否"
            ></el-switch>
            <template v-if="formData.csfTest[item.key] === 2">
              <el-select v-model="formData.csfTest[`${item.key}_result`]" style="margin-left: 10px; width: 80px">
                <el-option label="阴性" :value="1"></el-option>
                <el-option label="阳性" :value="2"></el-option>
              </el-select>
              <el-input 
                v-if="formData.csfTest[`${item.key}_result`] === 2"
                v-model="formData.csfTest[`${item.key}_positive`]" 
                placeholder="阳性值" 
                style="margin-top: 5px;"
              ></el-input>
            </template>
          </el-form-item>
        </el-col>
      </el-row>
      
    </template>
  </el-form>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";

const formData = reactive({
  labTests: {
    csf: 1,
  },
  csfTest: {
    checkup_time: '',
    color: '',
    clarity: '',
    stress: 1,
    stress_remark: '',
    cbc: '',
    cbc_result: '',
    cbc_remark: '',
    bacterial_smear: '',
    bacterial_smear_result: 1,
    bacterial_smear_remark: '',
    bacterial_culture: 1,
    bacterial_culture_result: 1,
    bacterial_culture_remark: '',
    fungal_culture: 1,
    fungal_culture_result: 1,
  }
});

const colorOptions = [
  { value: 1, label: '无色' },
  { value: 2, label: '红色' },
  { value: 3, label: '黄色' },
  { value: 4, label: '乳白色' },
  { value: 5, label: '微绿色' },
  { value: 6, label: '褐色' },
  { value: 7, label: '黑色' },
];

const clarityOptions = [
  { value: 1, label: '清晰' },
  { value: 2, label: '透明' },
  { value: 3, label: '微混' },
  { value: 4, label: '混浊' },
  { value: 5, label: '毛玻璃状' },
  { value: 6, label: '凝块' },
  { value: 7, label: '薄膜' },
];

const resultOptions = [
  { value: '0', label: '未查' },
  { value: '1', label: '正常' },
  { value: '2', label: '异常无临床意义' },
  { value: '3', label: '异常有临床意义' },
];

const cellCountItems = [
  { key: 'cbc', label: '总细胞计数' },
  { key: 'rbc', label: '红细胞计数' },
  { key: 'wbc', label: '有核细胞计数' },
  { key: 'protein_assay', label: '蛋白定量' },
  { key: 'sugar_quantify', label: '糖定量' },
  { key: 'chlorid', label: '氯化物含量' },
];

const otherTestItems = [
  { key: 'bacterial_smear', label: '细菌涂片' },
  { key: 'bacterial_culture', label: '细菌培养' },
  { key: 'fungal_culture', label: '真菌培养' },
  { key: 'acid_fast_stain', label: '抗酸染色' },
  { key: 'india_ink_stain', label: '墨汁染色' },
  { key: 'crag_test', label: '新型隐球菌抗原' },
  { key: 'je_igm_abs', label: '乙脑IgM抗体' },
  { key: 'tppa', label: 'TPPA' },
  { key: 'trust_prp', label: 'TRUST或RPR滴度' },
  { key: 'parasite_antibodies', label: '寄生虫抗体' },
  { key: 'paraneoplastic', label: '副肿瘤指标' },
  { key: 'csf_ocb', label: '特异性寡克隆区带' },
  { key: 'autoimmune_encephalitis', label: '自身免疫性脑炎' },
  { key: 'other_pathogen', label: '其他病原学检测' },
];

</script>

<style scoped>
.el-form-item {
  margin-bottom: 15px;
}
.el-select {
  width: 100%;
}
</style>
